import BaseBarChartComponent from "./base-bar-chart.js";

// 带背景色的柱状图组件
class BarChartWithBackground extends BaseBarChartComponent {
    // 重写观察的属性列表，添加背景色相关属性
    static get observedAttributes() {
        // 获取父类的观察属性并添加新的属性
        const parentAttributes = super.observedAttributes;
        return [
            ...parentAttributes,
            'bar-background-color_colorpicker',
            'bar-background-opacity_number',
            'bar-background-max_value',
            'bar-background-radius_number',
            'series-label-show_radio',
            'series-label-position_select',
            'series-label-color_colorpicker',
            'series-label-fontsize_number',
            'series-label-fontweight_select',

        ];
    }

    // 重写默认配置，添加背景色相关配置
    getDefaultConfig() {
        const parentConfig = super.getDefaultConfig();

        // 添加背景色相关配置
        parentConfig.seriesAttrs.push(
            ['bar-background-color_colorpicker', 'rgba(200, 200, 200, 0.3)'],
            ['bar-background-opacity_number', 0.3],
            ['bar-background-max_value', '5000'],
            ['bar-background-radius_number', 4]
        );

        return parentConfig;
    }

    // 重写生成系列配置的方法，添加背景柱形
    generateSeries(dataDemo, seriesConfig) {
        const originalSeries = super.generateSeries(dataDemo, seriesConfig);
        const borderRadius = parseInt(seriesConfig.barBackgroundRadius) || 4;
        const backgroundColor = seriesConfig.backgroundStyleColor || 'rgba(230, 230, 230, 0.3)';

        return originalSeries.map(series => ({
            ...series,
            // 启用背景显示
            showBackground: true,
            // 配置背景样式（ECharts 5.0+ 标准方式）
            backgroundStyle: {
                color: backgroundColor,
                borderRadius: borderRadius,
                shadowBlur: 0,
                borderWidth: 0
            },
            // 可选：设置背景范围
            backgroundLimit: parseFloat(seriesConfig.barBackgroundMax) || 5000
        }));
    }


    // 重写处理属性变化的方法，添加背景色相关处理
    handleAttributeChange(name, value, currentOptions) {
        // 先调用父类方法处理已有属性
        super.handleAttributeChange(name, value, currentOptions);

        // 处理背景色相关属性
        switch (name) {
            case 'series-showbackground_radio':
                this.updateSeriesShowBackground(value, currentOptions);
                break;
            case 'series-backgroundstyle-opacity_slider':
                this.updateSeriesBackgroundOpacity(value, currentOptions);
                break;
            case 'series-itemstyle-borderradius_slider':
                this.updateSeriesItemStyleBorderRadius(value, currentOptions);
                break;
            case 'series-barmaxwidth_slider':
                this.updateSeriesBarMaxWidth(value, currentOptions);
                break;
            case 'series-barminwidth_slider':
                this.updateSeriesBarMinWidth(value, currentOptions);
                break;
            case 'series-backgroundstyle-color_colorpicker':
                this.updateSeriesBackgroundColor(value, currentOptions);
                break;
            case 'series-label-show_radio':
                this.updateSeriesLabelShow(value, currentOptions);
                break;
            case 'series-label-position_select':
                this.updateSeriesLabelPosition(value, currentOptions);
                break;
            case 'series-label-color_colorpicker':
                this.updateSeriesLabelColor(value, currentOptions);
                break;
            case 'series-label-fontsize_number':
                this.updateSeriesLabelFontSize(value, currentOptions);
                break;
            case 'series-label-fontweight_select':
                this.updateSeriesLabelFontWeight(value, currentOptions);
                break;

        }
    }
    // 1. 系列标签字体粗细更新方法
    updateSeriesLabelFontWeight(value, currentOptions) {
        // 字体粗细有效值校验（ECharts支持的值）
        const validWeights = ['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
        const fontWeight = validWeights.includes(value) ? value : 'normal'; // 默认正常

        // 更新配置中的标签字体粗细（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelFontWeight = fontWeight;

        // 如果有当前图表配置，同步更新系列标签的字体粗细
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};
                // 确保textStyle对象存在
                currentOptions.series[index].label.textStyle = currentOptions.series[index].label.textStyle || {};

                // 设置标签字体粗细
                currentOptions.series[index].label.textStyle.fontWeight = fontWeight;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签字体大小更新方法
    updateSeriesLabelFontSize(value, currentOptions) {
        // 转换为整数并校验有效性（设置合理范围：8-30px）
        const fontSize = Math.max(8, Math.min(30, parseInt(value, 10) || 12));

        // 更新配置中的标签字体大小（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelFontSize = fontSize;

        // 如果有当前图表配置，同步更新系列标签的字体大小
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};
                // 确保textStyle对象存在（ECharts中字体大小通常在textStyle中）
                currentOptions.series[index].label.textStyle = currentOptions.series[index].label.textStyle || {};

                // 设置标签字体大小
                currentOptions.series[index].label.textStyle.fontSize = fontSize;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签颜色更新方法
    updateSeriesLabelColor(value, currentOptions) {
        // 确保颜色值有效（默认使用深灰色）
        const color = value || '#333';

        // 更新配置中的标签颜色（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelColor = color;

        // 如果有当前图表配置，同步更新系列标签的颜色
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};

                // 设置标签颜色
                currentOptions.series[index].label.color = color;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签位置更新方法
    updateSeriesLabelPosition(value, currentOptions) {
        // 标签位置有效值校验（ECharts支持的位置：top/right/bottom/left/inside/insideLeft等）
        const validPositions = ['top', 'right', 'bottom', 'left', 'inside', 'insideLeft', 'insideRight', 'insideTop', 'insideBottom'];
        const position = validPositions.includes(value) ? value : 'top'; // 默认顶部

        // 更新配置中的标签位置（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelPosition = position;

        // 如果有当前图表配置，同步更新系列标签的位置
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].label = currentOptions.series[index].label || {};

                // 设置标签位置
                currentOptions.series[index].label.position = position;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列标签显示状态更新方法
    updateSeriesLabelShow(value, currentOptions) {
        // 将值转换为布尔类型（处理radio组件可能返回的字符串值）
        const showLabel = value === 'true' || value === true;

        // 更新配置中的标签显示状态（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.labelShow = showLabel;

        // 如果有当前图表配置，同步更新系列标签的显示状态
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                // 确保label配置对象存在
                currentOptions.series[index].label = currentOptions.series[index].label || {};

                // 设置标签显示状态
                currentOptions.series[index].label.show = showLabel;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列背景样式颜色更新方法
    updateSeriesBackgroundColor(value, currentOptions) {
        // 确保颜色值有效（颜色选择器通常返回有效的颜色字符串）
        const color = value || 'rgba(230, 230, 230, 0.3)';

        // 更新配置中的背景颜色（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.backgroundStyleColor = color;

        // 如果有当前图表配置，同步更新系列背景的颜色
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].backgroundStyle = currentOptions.series[index].backgroundStyle || {};

                // 设置背景颜色
                currentOptions.series[index].backgroundStyle.color = color;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 柱状图系列最小宽度更新方法
    updateSeriesBarMinWidth(value, currentOptions) {
        // 检查当前配置中是否存在系列数组
        if (currentOptions.series) {
            // 遍历所有系列项，设置柱状图最小宽度
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};

                // 设置柱状图最小宽度（转换为整数，符合ECharts数值类型要求）
                currentOptions.series[index].barMinWidth = value.includes('%') ? value : `${value}%`;
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }
    updateSeriesBarMaxWidth(value, currentOptions) {
        // 检查当前配置中是否存在系列配置
        if (currentOptions.series) {
            // 遍历所有系列项，设置柱状图最大宽度
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};

                // 设置柱状图最大宽度（转换为整数）
                currentOptions.series[index].barMaxWidth =value.includes('%') ? value : `${value}%`;
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }
    updateSeriesItemStyleBorderRadius(value, currentOptions) {
        // 检查当前配置中是否存在系列配置
        if (currentOptions.series) {
            // 处理系列数组，为每个系列项设置边框半径
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};
                // 确保itemStyle对象存在
                currentOptions.series[index].itemStyle = currentOptions.series[index].itemStyle || {};

                // 设置边框半径（转换为整数）
                currentOptions.series[index].itemStyle.borderRadius = parseInt(value, 10);
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }
    // 更新柱子宽度
    updateBarWidth(width, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barWidth = width;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱子最大宽度
    updateBarMaxWidth(maxWidth, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barMaxWidth = maxWidth;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱子最小宽度
    updateBarMinWidth(minWidth, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barMinWidth = minWidth;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 1. 系列背景样式透明度更新方法
    updateSeriesBackgroundOpacity(value, currentOptions) {
        // 将滑块值转换为0-1之间的浮点数（假设滑块范围为0-100）
        const opacity = Math.max(0, Math.min(1, parseFloat(value) / 100)) || 0.3;

        // 更新配置中的透明度（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.backgroundStyleOpacity = opacity;

        // 如果有当前图表配置，同步更新系列背景的透明度
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].backgroundStyle = currentOptions.series[index].backgroundStyle || {};

                // 设置背景透明度
                currentOptions.series[index].backgroundStyle.opacity = opacity;
            });
            console.log("ces" + JSON.stringify(currentOptions))
            this.chart.setOption(currentOptions);
        }
    }
    // 2. 实现系列背景显示状态更新方法
    updateSeriesShowBackground(value, currentOptions) {
        // 将值转换为布尔类型
        const showBackground = value === 'true' || value === true;

        // 更新配置中的显示状态（供generateSeries方法使用）
        this.seriesConfig = this.seriesConfig || {};
        this.seriesConfig.showBackground = showBackground;

        // 如果有当前图表配置，同步更新系列的显示状态
        if (currentOptions.series) {
            currentOptions.series.forEach((seriesItem, index) => {
                currentOptions.series[index] = currentOptions.series[index] || {};
                currentOptions.series[index].showBackground = showBackground;
            });
            this.chart.setOption(currentOptions);
        }
    }
    // 更新柱状图背景色
    updateBarBackgroundColor(color, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            // 只更新背景系列
            const backgroundCount = currentOptions.series.length / 2;
            currentOptions.series.forEach((series, index) => {
                if (index < backgroundCount) { // 前半部分是背景系列
                    series.itemStyle = series.itemStyle || {};
                    series.itemStyle.color = color;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱状图背景透明度
    updateBarBackgroundOpacity(opacity, currentOptions) {
        const opacityValue = parseFloat(opacity);
        if (isNaN(opacityValue) || opacityValue < 0 || opacityValue > 1) {
            console.warn('无效的透明度值，必须是0到1之间的数字');
            return;
        }

        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            // 只更新背景系列
            const backgroundCount = currentOptions.series.length / 2;
            currentOptions.series.forEach((series, index) => {
                if (index < backgroundCount) { // 前半部分是背景系列
                    series.itemStyle = series.itemStyle || {};
                    series.itemStyle.opacity = opacityValue;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新背景柱形的最大值
    updateBarBackgroundMax(maxValue, currentOptions) {
        const value = parseFloat(maxValue);
        if (isNaN(value) || value <= 0) {
            console.warn('无效的最大值，必须是正数');
            return;
        }

        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            // 只更新背景系列的数据
            const backgroundCount = currentOptions.series.length / 2;
            currentOptions.series.forEach((series, index) => {
                if (index < backgroundCount) { // 前半部分是背景系列
                    // 获取对应的实际数据系列索引
                    const dataSeriesIndex = index + backgroundCount;
                    if (currentOptions.series[dataSeriesIndex] && currentOptions.series[dataSeriesIndex].data) {
                        // 使背景与实际数据长度匹配
                        series.data = currentOptions.series[dataSeriesIndex].data.map(() => value);
                    }
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新背景柱形的圆角
    updateBarBackgroundRadius(radius, currentOptions) {
        const radiusValue = parseInt(radius);
        if (isNaN(radiusValue) || radiusValue < 0) {
            console.warn('无效的圆角值，必须是非负整数');
            return;
        }

        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            // 计算背景系列数量
            const backgroundCount = currentOptions.series.length / 2;

            // 更新背景系列的圆角
            currentOptions.series.forEach((series, index) => {
                if (index < backgroundCount) { // 前半部分是背景系列
                    series.itemStyle = series.itemStyle || {};
                    series.itemStyle.borderRadius = [radiusValue, radiusValue, 0, 0];
                } else { // 后半部分是实际数据系列
                    series.itemStyle = series.itemStyle || {};
                    series.itemStyle.borderRadius = [radiusValue, radiusValue, 0, 0];
                }
            });
            this.chart.setOption(currentOptions);
        }
    }
}

// 注册自定义元素
customElements.define('bar-chart-with-background', BarChartWithBackground);
